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Adding  a Login  Screen 


• One  of  the  benefits  of  using 
a “Base”  template  and 
extending  it  is  the  ability  to 
easily  add  new  screens 

• We  will  quickly  add  a login 
screen  to  our  application 


O O O App  Engine 

◄ • O http://localhost:8080/login  © * Google  » 


App  Engine  Sites  Topics  Login 

Please  Log  In 

Please  enter  your  id  and  password  to  log  in  to  this  site. 

Account: 

Password: 

( Submit ) ( Cancel  ) 
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Steps 

• Make  a bit  of  utility  code  to  do  the  render  steps 

• Determine  a URL  for  the  login  screen 

• GET  will  display  the  screen 

• POST  will  check  the  password  and  optionally  log  you  in 

• Add  a LoginHandler  and  add  a route  for  /login  to  that  handler 

• Build  the  template  for  loginscreen.htm 

• Build  the  Python  code  for  LoginHandler 


def  doRender (handler , tname= ! index . htm ’ , values={ }) : 
temp  = os .path . join ( 

os  .path . dirname  ( file ) , 

'templates/’  + tname) 
if  not  os .path. isfile (temp) : 
return  False 

# Make  a copy  and  add  the  path 
newval  = diet (values) 

newval [' path ' ] = handler . request .path 

outstr  = template . render (temp,  newval) 
handler . response . out . write (outstr) 
return  True 


class  LoginHandler (webapp .RequestHandler) : 
def  get (self) : 

doRender (self , 'loginscreen.htm') 


def  main  ()  : 

application  = webapp .WSGIAppli cation ( [ 

( ' /login ' , LoginHandler) , 

('/.*' , MainHandler) ] , 
debug=True) 

wsgiref . handlers . CGIHandler ( ) . run (application) 

if  name ==  ' main ' : 

main ( ) 
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* * http: // local  host  :8080  / login  © - Google 
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Please  Log  In 

Please  enter  your  id  and  password  to  log  in  to  this  site. 


Account: 

Password: 


/login  will  be  our  path  for  the  login  screen 
GET  = display  the  screen 
POST  = check  the  password 


Modify  _base.htm 
Add  two  new  template  files 


▼ |B  ae-08-login 
app.yaml 
■ index. py 
index.yaml 

▼ |B  static 

glike.css 

▼ |B  templates 

_base.htm 

index.htm 

loggedin.htm 
loginscreen.htm 
5 sites.htm 
topics.htm 


base.htm 

<liXa  href=” sites  .htmM 

{%  if equal  path  ’/sites.htm’  %} 
class=” selected" 

{%  endif equal  %} 

>Sites</aX/li> 

<liXa  href  ="  topics  . htm" 

{%  if equal  path  ’ /topics . htm’  %} 
class=" selected" 

{%  endif equal  %} 

>Topics</aX/li> 

<liXa  href  =" /login" 

{%  if equal  path  ’/login’  %} 
class=" selected" 

{%  endif equal  %} 

>Login</aX/li> 

</ ul> 


Handling  the  POST 


• The  incoming  fields  come  as  “account”  and  “password” 

• We  check  for  empty  fields,  or  bad  password,  and  if  the 
users  knows  the  right  password,  we  give  them  a nice 
message. 


{%  extends  "_base.htmM  %} 

{%  block  bodycontent  %} 

<h2>Please  Log  In</h2> 

<P> 

Please  enter  your  id  and  password  to  log  in  to  this  site. 
</p> 

<form  method=Mpost"  action="/login"> 

Account:  <input  type=Mtext"  name= " account "/>  <br> 
Password:  <input  type=M pas sword"  name="password"/>  <br/> 
<input  type=" submit"  value= " Login "/> 

<input  type=" submit"  value=" Cancel" 

onclick=" window . location= ' / ' ; return  false ; " /> 
</form> 

</p> 

{%  endblock  %} 

loginscreen.htm 


App  Engine 

http: //local host:8080/login  C Q,'  Google 


App  Engine 
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+ |0hitp://localhost:8O8O/login 


Please  Log  In 

Please  enter  your  id  and  password  to  log  in  to  this  site. 

Account:  Taiiy 
Password:  

( login ) (Cancel) 


App  Engine 

Login  successful. 
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Please  Log  In 

Please  enter  your  id  and  password  to  log  in  to  this  site. 

Account 

Password: 

( Login  ) (Cancel) 

Please  specify  Account  and  Password 


Please  Log  In 

Please  enter  your  id  and  password  to  log  in  to  this  site. 

Account: 

Password: 

( Login  ) ( Cancel  ) 

Incorrect  password 


def  post (self) : 

acct  = self . request. get (’ account ’ ) 

pw  = self . request . get ( ’password' ) 

logging . info ( ’ Checking  account= ' +acct+ ' pw= ' +pw) 

if  pw  ==  ' ' or  acct  ==  ' ' : 
doRender ( 
self, 

’loginscreen.htm' , 

{'error'  : 'Specify  Acct  and  PW' } ) 

elif  pw  ==  'secret' : 

doRender (self , ' loggedin.htm' , { } ) 
else : 

doRender ( 
self, 

'loginscreen.htm' , 

{'error'  : 'Incorrect  password'}  ) 


{%  extends  "_base.htmM  %} 
{%  block  bodycontent  %} 
<P> 

Login  successful. 
</p> 

{%  endblock  %} 
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<2  + [Q  http: //local  host:8080/login 
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Login  successful. 


loggedin.htm 


{%  extends  "_base.htm"  %} 

{%  block  bodycontent  %} 

<h2>Please  Log  In</h2> 

<P> 

Please  enter  your  id  and  password  to  log  in  to  this  site. 
</p> 

<P> 

<form  method=Mpost"  action=" /login" > 

Account:  <input  type="text"  name= " account" />  <br> 
Password:  <input  type=M pas sword"  name=" pas sword" />  <br/> 
Cinput  type=" submit"  value="Login"/> 

<input  type=" submit"  value=" Cancel" 

onclick= "window . location= ' / ' ; return  false ; " /> 
</form> 

</p> 

{%  ifnotequal  error  None  %} 

<P> 

{{  error  }} 

</p> 

{%  endifnotequai  %}  loginscreen.htm 

{%  endblock  %} 


